<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="../animate.css">
    <style>
        /* 自定义动画 */
        @keyframes bounce-in{
            0%{
                transform: opacity 0
            }
            50%{
                transform: opacity 0.5
            }
            100%{
                transform: opacity 0
            }
        }
        
        .fade-enter,.fade-leave-to{
            transform-origin: left center;
            animation: bounce-in 1s;
        }
        .fade-enter-active,.fade-leave-active{
            transform-origin: left center;
            animation: bounce-in 1s reverse;
        }
        

    </style>
</head>
<body>
    <div id="root">
        <!--transation 标签可以自定义进入出去动画 -->
        <!-- 使用animate.css 必须加上animated字符 
        appear和appear-active-class使用在首次加载
        如果过度和@keyFrame都想用就在class里 接着加
        type表示以谁的动画执行时间为准
        :duration="10000"强行制定动画时间
        或者
        :duration="{enter:5000,leave:10000}"强行制定进场出场动画时间
    -->
        <transition name = 'fade' 
        type='transition'
        :duration="{enter:5000,leave:10000}"
        appear
        enter-active-class="animated tada fade-enter-active" 
        leave-active-class="animated shake fade-leave-active"
        appear-active-class="animated tada"
        >
            <div v-if="show">hello world</div>
        </transition>
        
        <button @click="handleClick">切换</button>
    </div>

    <script>
        var vm  = new Vue({
            el:'#root',
            data:{
                show:true
            },
            methods:{
                handleClick(){
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>